<template>
  <div class="admin-dashboard">
    <h1 class="dashboard-title">管理后台</h1>

    <!-- 数据概览卡片 -->
    <div class="overview-cards">
      <OverviewCard v-for="(item, index) in overviewData" :key="index" :icon="item.icon" :title="item.title"
        :value="item.value" :growth="item.growth" :color="item.color" />
    </div>

    <!-- 图表区域 -->
    <!-- <div class="dashboard-charts">
      <div class="chart-row">
        <div class="chart-col">
          <SalesTrendChart />
        </div>
        <div class="chart-col">
          <BaseChart type="donut" height="300px" title="订单分布" :series="orderDistributionSeries"
            :customOptions="orderDistributionOptions" />
        </div>
      </div>
    </div> -->

    <!-- 最近活动 -->
    <!-- <div class="recent-activities">
      <RecentActivities :activities="recentActivities" />
    </div> -->
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue';
import OverviewCard from '@/components/admin/dashboard/OverviewCard.vue';
import BaseChart from '@/components/admin/charts/BaseChart.vue';
import SalesTrendChart from '@/components/admin/charts/SalesTrendChart.vue';
import RecentActivities from '@/components/admin/dashboard/RecentActivities.vue';
import { generateDashboardOverviewData, generateRecentActivitiesData } from '@/utils/adminMock';
import { StatisticsDataApi } from '@/api/index'

// 数据概览
const dashboardData = ref(generateDashboardOverviewData());
const recentActivities = ref(generateRecentActivitiesData(8));

// 将数据映射到概览卡片需要的格式
const overviewData = computed(() => [
  {
    icon: 'shopping-cart',
    title: '今日订单',
    value: statisticsData.value?.dayOrderDataNum?.orderCountDayData ?? 0,
    growth: dashboardData.value.growth.todayOrders,
    color: 'primary'
  },
  {
    icon: 'users',
    title: '分销商总数',
    value: statisticsData.value.ShopUserDataCount ?? 0,
    growth: dashboardData.value.growth.totalDistributors,
    color: 'success'
  },
  // {
  //   icon: 'user-tag',
  //   title: '代理总数',
  //   value: dashboardData.value.totalAgents ?? 0,
  //   growth: dashboardData.value.growth.totalAgents,
  //   color: 'warning'
  // },
  {
    icon: 'box',
    title: '产品总数',
    value: statisticsData.value.GoodsDataCount ?? 0,
    growth: dashboardData.value.growth.totalProducts,
    color: 'info'
  },
  {
    icon: 'money-bill-wave',
    title: '今日支付金额',
    value: `${statisticsData.value?.dayOrderDataNum?.orderMoneyDayData ?? 0} USDT`,
    growth: dashboardData.value.growth.todayPaymentAmount,
    color: 'primary'
  },
  {
    icon: 'chart-line',
    title: '总营收',
    value: `${statisticsData.value?.OrderDataTotalNum ?? 0} USDT`,
    growth: dashboardData.value.growth.totalRevenue,
    color: 'success'
  },
  {
    icon: 'clock',
    title: '待处理提现',
    value: `${statisticsData.value?.PayDataTotalNum ?? 0} USDT`,
    growth: dashboardData.value.growth.pendingWithdrawAmount,
    color: 'warning'
  },
  {
    icon: 'money-check-alt',
    title: '累计提现',
    value: `${statisticsData.value?.PayDataTotalAlreadyNum ?? 0} USDT`,
    growth: dashboardData.value.growth.totalWithdrawAmount,
    color: 'info'
  }
]);

// 订单分布数据
const orderDistributionData = ref({
  series: [44, 55, 13, 33, 12]
});

// 转换为BaseChart组件需要的series格式
const orderDistributionSeries = computed(() => [
  {
    name: '订单分布',
    data: orderDistributionData.value.series
  }
]);

// 订单分布图表选项
const orderDistributionOptions = ref({
  labels: ['待付款', '待发货', '已发货', '已完成', '已取消'],
  colors: ['#5e72e4', '#2dce89', '#fb6340', '#11cdef', '#f5365c'],
  legend: {
    position: 'bottom'
  },
  tooltip: {
    y: {
      formatter: function (value: number) {
        return value + ' 订单';
      }
    }
  },
  dataLabels: {
    enabled: true,
    formatter: function (val: number, opts: any) {
      return Math.round(val) + '%';
    }
  }
});

// 统计数据对象
const statisticsData = ref({})

const getStatisticsDataRequest = async () => {
  try {
    const res = await StatisticsDataApi({})

    console.log(1111, res.data)

    Object.assign(statisticsData.value, res.data)
  } catch (err) {
    console.log('getStatisticsDataRequest', err)
  }
}

// 初始化数据
onMounted(() => {
  // 可以在这里添加从API获取实际数据的逻辑
  dashboardData.value = generateDashboardOverviewData();
  recentActivities.value = generateRecentActivitiesData(8);

  getStatisticsDataRequest()
});
</script>

<style scoped>
.admin-dashboard {
  padding: 24px;
}

.dashboard-title {
  margin-top: 0;
  margin-bottom: 24px;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.overview-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}

.dashboard-charts {
  margin-bottom: 24px;
}

.chart-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 20px;
}

@media (max-width: 1200px) {
  .chart-row {
    grid-template-columns: 1fr;
  }
}

.chart-col {
  min-height: 350px;
}

.recent-activities {
  margin-top: 24px;
}

.dashboard-content {
  margin-top: 20px;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}
</style>
